import { useEffect, useState } from 'react'
import axios from '../util/axios.config'
import { Navigate, useRoutes } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import Home from '../views/home/Home'
import Restaurant from '../views/home/Restaurant'
import Shop from '../views/shop/Shop'   //sunt
import Courier from '../views/shop/Courier'   //sunt
import Berider from '../views/home/Berider'
import Login from '../views/login/Login'
import ChoiceLogin from '../views/choicelogin/ChoiceLogin'
import Message from '../views/message/Message'
import Chat from '../views/message/Chat'
import Chat_bu from '../views/business/message/Chat'
import Chat_ri from '../views/rider/message/Chat'
import Order_user from '../views/order/Order_user'
import Dd from '../views/shop/Order_user'   //sunt

// import My_user from '../views/usermy/My_user'
import My from '../views/usermy/My'
import AccumulatedConsumption from '../views/usermy/AccumulatedConsumption.jsx'
import CardBalance from '../views/usermy/CardBalance.jsx'
import Coupon from '../views/usermy/Coupon.jsx'
import ShippingAddress from '../views/usermy/ShippingAddress.jsx'
import MerchantEnrollment from '../views/usermy/MerchantEnrollment.jsx'
import GrowthLevel from '../views/usermy/GrowthLevel.jsx'

import TakingOrders from '../views/rider/takingOrders/TakingOrders'
import My_rider from '../views/rider/my/My_rider'
import Home_business from '../views/business/home/Home_business'
import My_business from '../views/business/my/My_business'
import Order_details from '../views/order/details/Order_details'
import CumulativeTips from '../views/rider/tips/CumulativeTips.jsx'
import Message_bu from "../views/business/message/Message_business"
import Message_ri from "../views/rider/message/Message_rider"
import { addMenuList } from '../redux/user_reducer'
import Order_business from '../views/business/order/Order_business'
import Order_business_details from '../views/business/order/details/Order_business_details'
import ErrandOrder from '../views/rider/ErrandOrder/ErrandOrder.jsx'
import TipWithdrawal from '../views/rider/tipwithdrawal/TipWithdrawal.jsx'

import Success from '../views/shop/Success'  //sunt

export default function Router() {
    const userObj = useSelector(a => a.user.userObj)
    const isLogin = useSelector(a => a.user.isLogin)
    const dispatch = useDispatch()

    let [routes, setRoutes] = useState([
        { path: '/login', element: <Login></Login> },
        { path: '/choiceLogin', element: <ChoiceLogin></ChoiceLogin> },
        { path: "/", element: <Navigate to="/login"></Navigate> },
        // { path: '/home', element: <Home></Home> },

    ])

    const routerMap = {
        "/home": <Home></Home>,
        '/home/berider': <Berider></Berider>,
        '/home/restaurant': <Restaurant></Restaurant>,


        // '/shop/:id': <Shop></Shop>,
        '/shop/:id': <Shop></Shop>,  //sunt

        '/courier': <Courier></Courier>,   //sunt
        "/message": <Message></Message>,
        "/chat": <Chat></Chat>,
        "/user/order": <Order_user></Order_user>,
        "/details": <Order_details></Order_details>,  
        "/user/db": <Dd />,  //sunt
        
        "/user/my": <My></My>,
        "/user/cardbalance": <CardBalance></CardBalance>,
        "/user/accumulatedconsumption": <AccumulatedConsumption></AccumulatedConsumption>,
        "/user/coupon": <Coupon></Coupon>,
        "/user/shippingaddress": <ShippingAddress></ShippingAddress>,
        "/user/merchantenrollment": <MerchantEnrollment></MerchantEnrollment>,
        "/user/growthlevel": <GrowthLevel></GrowthLevel>,
        
        "/rider/order": <TakingOrders></TakingOrders>,
        "/rider/my": <My_rider></My_rider>,
        "/rider/tip": <CumulativeTips></CumulativeTips>,
        "/rider/eorder": <ErrandOrder></ErrandOrder>,
        "/rider/withdraw": <TipWithdrawal></TipWithdrawal>,
        "/rider/chat": <Chat_ri></Chat_ri>,
        "/rider/chathome": <Message_ri></Message_ri>,
        "/business/home": <Home_business></Home_business>,
        "/business/chat": <Chat_bu></Chat_bu>,
        "/business/chathome": <Message_bu></Message_bu>,
        "/business/my": <My_business></My_business>,
        "/business/order": <Order_business></Order_business>,
        "/business/order/details": <Order_business_details></Order_business_details>,
        "/user/success": <Success></Success>, //sunt
    }

    useEffect(() => {
        if (isLogin) {
            getNewRouter()
        }
    }, [userObj])

    if (isLogin) {
        // routes.push({ path: '/home', element: <Home></Home> })
    }
    // 动态路由
    const routerEach = (routerList) => {
        return routerList.map(item => {
            // console.log(item.path,routerMap[item.path])
            let newItem = {
                path: item.path,
                element: routerMap[item.path]
            }
            
            if (item.children) {
                newItem.children = routerEach(item.children)
            }
            // console.log(newItem)
            return newItem
        })
    }
    const getNewRouter = async () => {
        const res = await axios.get('http://47.116.116.42:3000/router/list', {
            params: {
                key: userObj.key
            }
        })
        dispatch(addMenuList(res.data.menuList))
        
        const addRouter = routerEach(res.data.routerList)
        setRoutes(prevRoutes => [...prevRoutes, ...addRouter])
    }

    let element = useRoutes(routes)
    return element
}
